<template>
  <div class="exper-page-index">
    <!-- 页面标题 -->
    <div class="container-box">
      <div class="main-title">专家抽取管理</div>
      <!-- 页面主体 -->
      <div class="main-content">
        <!-- 过滤搜索 -->
        <div class="query-box">
          <el-form
            ref="queryForm"
            inline
            label-position="right"
            label-width="100px"
            :model="queryForm"
            :rules="queryFormRules"
            size="small"
            >
            <el-row>
              <el-form-item label="评审任务">
                <el-input
                  v-model="queryForm.taskName"
                  maxlength="16"
                  placeholder="请输入评审任务"
                />
              </el-form-item>
              <el-form-item label="评审类型">
                <el-select
                  v-model="queryForm.reviewType"
                  placeholder="请选择评审类型"
                >
                  <el-option
                    label="方案评审"
                    value="0"
                  />
                  <el-option
                    label="年度项目清单评审"
                    value="1"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="抽取时间">
                <el-date-picker
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    placeholder="选择日期"
                    v-model="daterange"
                    value-format="yyyy-MM-dd"
                    @change="changeDate"
                    >
                </el-date-picker>
                  
              </el-form-item>
              <el-form-item label="状态">
                <el-select
                  v-model="queryForm.expertStatus"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="dict in reviewType"
                    :key="dict.dictCode"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
                <el-form-item style="margin-left: 20px">
                <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="handleQuery"
                >
                    查询
                </el-button>
                <el-button
                    icon="el-icon-refresh-right"
                    @click="resetQuery"
                >
                    重置
                </el-button>
                </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div class="box-content">
        <div class="table-box">
          <!-- 数据表格 -->
          <vxe-table
            ref="table"
            border
            cell-class-name="table-cell"
            class="list-table"
            :data="tableData"
            header-cell-class-name="table-header-cell"
            header-row-class-name="table-header"
            :loading="loading"
            show-header-overflow="ellipsis"
            show-overflow="tooltip"
          >
            <vxe-table-column
              v-for="item in tableColumn"
              :key="item.field"
              v-bind="item"
            />

            <vxe-table-column field="expertStatus" title=状态 width="200">
              <template #default="{ row }">
                <div class="state-span" v-if='row.expertStatus==2'>
                  <span class="out-line2"><span></span></span>
                    {{
                      row.expertStatus==''?'专家待接受': 
                      row.expertStatus==1?'专家待接受': 
                      row.expertStatus==2?'专家已接受':
                      row.expertStatus==3?'专家待评价':
                    row.expertStatus==4?'专家已评价':'专家申请取消'

                    }}
                </div>
                <div class="state-span" v-else-if='row.expertStatus==4'>
                  <span class="out-line4"><span></span></span>
                  {{
                    row.expertStatus==''?'专家待接受': 
                    row.expertStatus==1?'专家待接受': 
                    row.expertStatus==2?'专家已接受':
                    row.expertStatus==3?'专家待评价':
                    row.expertStatus==4?'专家已评价':'专家申请取消'

                  }}
                </div>
                <div class="state-span" v-else>
                  <span class="out-line"><span></span></span>
                  {{
                    row.expertStatus==''?'专家待接受': 
                    row.expertStatus==1?'专家待接受': 
                    row.expertStatus==2?'专家已接受':
                    row.expertStatus==3?'专家待评价':
                    row.expertStatus==4?'专家已评价':'专家申请取消'

                  }}
                </div>
              </template>

            </vxe-table-column>
            <vxe-table-column header-align="center" title="操作" width="200">
              <template #default="{ row }">
                <template >
                  <el-button
                    class="btn-text"
                    size="small"
                    type="text"
                    @click="handleClick(row)"
                  >
                    查看
                  </el-button>
                  <!-- <el-button
                    class="btn-text"
                    size="small"
                    type="text"
                    @click="handleDel(row)"
                  >
                    删除
                  </el-button> -->
                </template>
                <!-- <div style="display: flex; justify-content: center">
                </div> -->
              </template>
            </vxe-table-column>
          </vxe-table>

        </div>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryForm.pageSize"
          >
        </el-pagination>
    </div>
  </div>
</template>

<script>
import {getExpertsList} from '../../api/manage/messsage'
export default {
  data() {
    return {
      // 查询参数
      queryForm: {
        pageSize: 10,
        pageNum: 1,
        taskName:"",
        reviewType:"",
        extractTime:"",
        expertStatus:""
      },
      loading:false,
      tableData:[

      ],
      total:0,
      queryFormRules: {},
      // 列表Tabs
      listType: "all",
      approveFlag: false,
      tableColumn:[
        { type:'seq', width: '60', title: '序号' },
        {title:'评审任务',field:'taskName',
        
        },
        {title:'评审类型',field:'reviewType',
        formatter: ({ cellValue }) => {
            return cellValue == 0 ? '方案评审' :'年度项目清单评审'
          }},
        {title:'抽取时间',field:'extractTime'},
      ],  
      reviewType:[],
      daterange:[],//时间
    };
  },
  created() {
    this.getDicts("expert_status").then(res => {
      this.reviewType = res.data;
    });

    this.getList()
  },
  methods: {
    handleSizeChange(val){
      this.queryForm.pageSize=val
      this.getList()
    },
    handleCurrentChange(val){
      this.queryForm.pageNum=val
      this.getList()
    },
    handleClick(row){
      if(row.expertStatus==3||row.expertStatus==4){
        this.$router.push({path:'/business_manage/manage/expertsdraw/detailsNoEvaluate',query:{
          type:1,
          id:row.reviewTaskId,
          way:row.expertStatus
        } })
      }else{
        this.$router.push({path:'/business_manage/manage/expertsdraw/details',query:{
          type:1,
          id:row.reviewTaskId
        } })
      }
    },
    handleQuery(){
        console.log(this.queryForm)
        this.getList()
    },
    resetQuery(){
      this.queryForm={
        pageSize: 10,
        pageNum: 1,
        taskName:"",
        reviewType:"",
        expertStatus:""
      }
      this.daterange=[]
      this.getList()
    },
    getList(){
      console.log(this.queryForm)
      getExpertsList(this.queryForm).then(res =>{
        console.log(res)
        // if(res.code==200){
          this.tableData=res.list
          this.total=res.total
        // }
      })
    },
    //选择查询时间
    changeDate(val){
      console.log(val)
      this.queryForm.starTime=val[0]+ " 00:00:00"
      this.queryForm.endTime=val[1]+ " 23:59:59"
    }
  }
};
</script>

<style lang="scss" scoped>
.exper-page-index{
  width: 100%;
  padding:16px;
  height: 100%;
  background:#f5f5f5;
  .container-box{
    // width: 1688px;
    background:#FFF;
    .main-title{
        font-size: 18px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
        padding:24px
    }
  }
  .box-content{
    background:#fff;
    margin-top:10px;
    padding-bottom:40px;
    .table-box{
      margin:25px 0;
      // width:1600px;
      padding: 24px;

      .state-span{
        display: flex;
        align-items: center;
        // .out-line{
        //   display: inline-block;
        //   width: 16px;
        //   height: 16px;
        //   // opacity: 0.1;
        //   background: rgba(49,113,238,0.1);
        //   border-radius: 16px;
        //   margin-right:10px;
        //   span{
        //     margin:4px;
        //     width: 7px;
        //     height: 7px;
        //     background: #3171ee;
        //     border-radius: 16px;
        //     display: inline-block;
        //   }
        // }
        .out-line,
        .out-line2,
        .out-line4 {
          display: inline-block;
          width: 16px;
          height: 16px;
          // opacity: 0.1;
          background: rgba(49, 113, 238, 0.1);
          border-radius: 16px;
          margin-right: 10px;
          span {
            margin: 4px;
            width: 7px;
            height: 7px;
            background: #3171ee;
            border-radius: 16px;
            display: inline-block;
          }
        }
        .out-line2 {
          background: rgba(51, 168, 61, 0.1);
          span {
            background: #33a83d;
          }
        }
        .out-line4 {
          background: rgba(223, 32, 66, 0.1);
          span {
            background: #df2042;
          }
        }
      }
    }
    .el-pagination{
      text-align: center;
      margin-top:40px;
    }
  }
}
.number-box {
  display: flex;
  width: 218px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}
.rule-input {
  border: 0 !important;
}
</style>


<style >
 .exper-page-index .el-form-item .el-input__inner {
  width: 252px;
}
.rule-input .el-input__inner {
  border: 0 !important;
  width: 100px;
}
</style>
